<template>
  <!-- 核酸检测 -->
  <div class="select-city">
    <nav-bar>
      <div slot="left" @click="goback">
        <span class="iconfont goback">&#xe600;</span>
      </div>
      <div slot="center"><h2>核酸采样点查询</h2></div>
    </nav-bar>
    <!-- 出发的城市 -->
    <div class="field">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="请选择城市"
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
    </div>

    <div class="btn">
      <van-button
        block
        round
        color="rgb(78,110,242)"
        type="primary"
        @click="searth"
        >点击查看</van-button
      >
    </div>

    <!-- 政策查询结果 -->
    <template v-if="total.length > 0">
      <div class="content">
        查询到{{ total.length }}个结果:
        <ul class="list" v-for="(item, index) in total" :key="index">
          <li>
            <p>检测机构:{{ item.name }}</p>
            <p>地址:{{ item.address }}</p>
            <p>咨询电话:{{ item.phone }}</p>
          </li>
        </ul>
      </div>
    </template>
    <template v-if="total.length < 0">
      <div class="content">
        <p>暂未查到相关数据！</p>
      </div>
    </template>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Secret from "../../../api/Secret";
import NavBar from "../../../components/NavBar.vue";
export default {
  name: "Test",
  components: {
    NavBar,
  },
  // 定义属性
  data() {
    return {
      show: false, //弹窗状态
      fieldValue: "",
      cascaderValue: "",
      city_id: "",
      total: [],
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions }) {
      // console.log(value, selectedOptions, tabIndex);
      this.city_id = value;
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    //查询城市的疫情政策
    searth() {
      console.log(this.city_id);
      // 请求接口
      this.$api
        .TravelTest({
          city_id: this.city_id,
        })
        .then((res) => {
          console.log("555", res.data);
          this.total = res.data.result.data;
          // total.forEach(element=>{

          // })
          console.log(this.toatl);
        });
    },
    goback() {
      return history.back();
    },
  },
  mounted() {
    this.$api
      .travelCity({
        key: Secret.travelKey,
      })
      .then((res) => {
        console.log(res.data.result); //如果调用接口次数达到上线，则打印"今日次数已达上限"
        if (res.data.result) {
          //let arr =  [{text:'',value:'',children[{}]},{}]
          let arr = [];
          res.data.result.forEach((element) => {
            //province
            let temp = {};
            temp.text = element.province;
            temp.value = element.province_id;
            temp.children = [];
            element.citys.forEach((item) => {
              let obj = {};
              obj.text = item.city;
              obj.value = item.city_id;
              temp.children.push(obj);
            });
            arr.push(temp);
          });
          this.options = arr;
          console.log(arr);
        } else {
          console.log("今日次数已达上限");
        }
      });
  },
};
</script>

<style lang="less" scoped>
.select-city {
  border-top: 1px solid #eee;

  padding-bottom: 0.4rem;
  background: #f5f5f5;
  .goback {
    font-size: 0.5rem;
    vertical-align: middle;
    color: rgb(78, 110, 242);
  }
  h2 {
    font-size: 0.4rem;
    text-align: center;
  }
}
.btn {
  width: 6rem;
  margin-left: 0.75rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.field {
  width: 6rem;
  margin-left: 0.8rem;
  margin-top: 0.4rem;
  h2 {
    font-size: 0.4rem;
    padding-bottom: 0.1rem;
    text-align: center;
  }
}
.content {
  background: #fff;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  min-height: 4rem;
  margin-bottom: 0.2rem;

  .list {
    li {
      margin-top: 0.2rem;
      padding: 0.1rem;
      background: #f7f7f7;
      border-radius: 0.1rem;
      letter-spacing: 0.02rem;
      line-height: 0.5rem;
      p {
        margin-left: 0.2rem;
      }
    }
  }
}
</style>
